<template>
  <div class="com-header">
    <main>
      <!-- 左边内容 -->
      <div class="left-container">
        <div @click="router.push('/')" class="logo-box">
          <img src="@/assets/logo.png" alt="" />
          <p>Bytetapper</p>
        </div>
        <ul class="menu-box">
          <li
            ref="menuDom"
            @mouseenter="handleMouseenter"
            @mouseleave="handleMouseleave(item)"
          >
            <span> New Arrivals</span>
            <div v-if="menu_list.length" ref="menuList" class="menu-list">
              <p
                v-for="(item, index) in menu_list"
                :key="index"
                @click="toPropsList(item)"
                class="menu-item"
              >
                {{ item.name }}
              </p>
            </div>
          </li>
          <li @click="toGame">
            <span>More Gameplay</span>
          </li>
        </ul>
      </div>
      <!-- 右边内容 -->
      <div class="right-container">
        <div
          v-if="!store.state.userInfo.access_token"
          @click="signIn_visible = true"
          class="sign-in-box"
        >
          <span>LOG IN</span>
        </div>
        <div v-else @click="toAccount" class="account-box">
          <span>ACCOUNT</span>
        </div>
        <div @click="search_visible = true" class="query-box">
          <span>Enter a keyword</span>
          <el-icon><Search /></el-icon>
        </div>
      </div>
    </main>
    <!-- 登录弹窗 -->
    <el-dialog
      v-if="signIn_visible"
      v-model="signIn_visible"
      :before-close="handleClose"
      class="signIn-dialog"
    >
      <div class="content">
        <!-- 登录 -->
        <div class="left-container" v-if="Ifhasaccount">
          <el-form
            ref="signInFormRef"
            :model="signInForm"
            :rules="signInRules"
            require-asterisk-position="right"
            label-position="top"
          >
            <p class="title">SIGN IN</p>
            <el-form-item label="Email" prop="email">
              <el-input v-model="signInForm.email"></el-input>
            </el-form-item>
            <el-form-item label="Password" prop="password">
              <el-input v-model="signInForm.password" show-password></el-input>
            </el-form-item>
            <el-form-item>
              <el-button size="large" @click="submitSignInForm(signInFormRef)"
                >SIGN IN</el-button
              >
            </el-form-item>
            <p class="text1" @click="changeState('log')">
              Or register a new account
            </p>
          </el-form>
        </div>
        <!-- 分割线 -->
        <!-- <el-divider direction="vertical" style="height: 400px" /> -->
        <!-- 注册 -->
        <div class="right-container" v-else>
          <el-form
            ref="signOutFormRef"
            :model="signOutForm"
            :rules="signOutRules"
            require-asterisk-position="right"
            label-position="top"
          >
            <p class="title">CREATE ACCOUNT</p>
            <el-form-item label="Email" prop="email">
              <el-input v-model="signOutForm.email"></el-input>
            </el-form-item>
            <el-form-item label="Password" prop="password">
              <el-input v-model="signOutForm.password" show-password></el-input>
            </el-form-item>
            <el-form-item label="Confirm Password" prop="password">
              <el-input
                v-model="signOutForm.confirm_password"
                show-password
              ></el-input>
            </el-form-item>
            <el-form-item label="" prop="type">
              <div class="checkbox-box">
                <el-checkbox-group v-model="signOutForm.type">
                  <el-checkbox :value="1" name="type" />
                </el-checkbox-group>
                <p class="text2">
                  I confirm that I am over 13 years old
                </p>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button size="large" @click="submitSignOutForm(signOutFormRef)"
                >CREATE ACCOUNT</el-button
              >
            </el-form-item>
            <p class="text1" @click="changeState('reg')">
              Login directly with an existing account
            </p>
          </el-form>
        </div>
      </div>
    </el-dialog>
    <!-- 搜索弹窗 -->
    <el-dialog
      v-model="search_visible"
      fullscreen
      :before-close="handleClose"
      class="search-dialog"
    >
      <div class="content">
        <p class="title">
          <span>Search Games.</span>
          <el-icon @click="handleClose"><CloseBold /></el-icon>
        </p>
        <el-input
          v-model="search_params"
          placeholder="Search Game"
          size="large"
          @input="handleInput"
        ></el-input>
        <div v-if="search_data.length" class="game-list">
          <li
            v-for="(item, index) in search_data"
            :key="index"
            @click="handleSure(item)"
          >
            <p class="name ellipsis">
              {{ item.name }}
            </p>
          </li>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { register, login } from "@/api/login";
import { categories, productList } from "@/api/product";
import { reactive, ref } from "vue";
import { UserFilled, Search, CloseBold } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { useStore } from "vuex";
import router from "@/router";

const store = useStore();

// 获取游戏分类列表
const menu_list = ref([]);
const getProductList = () => {
  categories({
    parent_ids: [
      100300, 100301, 100302, 100303, 100304, 100305, 100306, 100307, 100308,
      100309, 100310, 100311,
    ],
  }).then((res) => {
    menu_list.value = res.data;
    // console.log(menu_list.value);
  });
};
getProductList();

// 跳转道具列表
const toPropsList = (item) => {
  menuList.value.style.display = "none";
  router.push({
    path: "/propsList",
    query: {
      id: item.id,
    },
  });
};

// 跳转游戏首页
const toGame = () => {
  router.push({
    path: "/game",
  });
};

// 登录
const Ifhasaccount = ref(true); //是否有账户
// 修改登录/注册状态
const changeState = (res) => {
  if (res == "log") {
    Ifhasaccount.value = false;
  } else if (res == "reg") {
    Ifhasaccount.value = true;
  }
};

const signIn_visible = ref(false);
const signInFormRef = ref(null);
const signInForm = reactive({
  email: "",
  password: "",
  from: "pc_game7",
});
const signInRules = reactive({
  email: [
    {
      required: true,
      message: "Please enter the Email",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "Please enter the Password",
      trigger: "blur",
    },
  ],
});

// 提交登录表单
const submitSignInForm = async (formEl) => {
  // // 清空注册校验
  // signOutFormRef.value.clearValidate();
  if (!formEl) return;
  await formEl.validate((valid) => {
    if (valid) {
      login({ ...signInForm })
        .then((res) => {
          store.dispatch("setUserInfo", res.data); // 存储个人信息
          signIn_visible.value = false;
          router.push("/");
          ElMessage({
            message: "Login success!",
            type: "success",
          });
        })
        .catch((res) => {
          ElMessage({
            message: res.message,
            type: "error",
          });
        });
    } else {
      return;
    }
  });
};

// 注册
const signOutFormRef = ref(null);
const signOutForm = reactive({
  email: "",
  password: "",
  confirm_password: "",
  type: [],
  from: "pc_game7",
});
const signOutRules = reactive({
  email: [
    {
      required: true,
      message: "This field is required",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "This field is required",
      trigger: "blur",
    },
  ],
  confirm_password: [
    {
      required: true,
      message: "This field is required",
      trigger: "blur",
    },
  ],
  type: [
    {
      required: true,
      message: "This field is required",
      trigger: "blur",
    },
  ],
});

// 提交注册表单
const submitSignOutForm = async (formEl) => {
  // // 清空登录校验
  // signInFormRef.value.clearValidate();
  if (!formEl) return;
  await formEl.validate((valid) => {
    if (valid) {
      if (signOutForm.password === signOutForm.confirm_password) {
        register(signOutForm).then((res) => {
          ElMessage({
            message: "Register success!",
            type: "success",
          });
          login({
            email: signOutForm.email,
            password: signOutForm.password,
            from: "pc_game7",
          })
            .then((res) => {
              store.dispatch("setUserInfo", res.data); // 存储个人信息
              signIn_visible.value = false;
              router.push("/");
            })
            .catch((res) => {
              ElMessage({
                message: res.message,
                type: "error",
              });
            });
        });
      } else {
        ElMessage({
          message: "Password does not match!",
          type: "error",
        });
      }
    } else {
      return;
    }
  });
};

// 搜索游戏
const search_visible = ref(false);
const search_params = ref("");
const search_data = ref([]);
let Timer = null;
const handleInput = () => {
  clearTimeout(Timer);
  Timer = setTimeout(() => {
    productList({ keyword: search_params.value, brand_id: 19 }).then((res) => {
      search_data.value = res.data.data;
      // console.log(search_data.value);
    });
  }, 1000);
};

// 道具搜索跳转
const handleSure = (item) => {
  search_visible.value = false;
  router.push({
    path: "/propsItem",
    query: { id: item.id },
  });
};

// 跳转个人中心
const toAccount = () => {
  router.push("/account");
};

// 关闭弹窗
const handleClose = () => {
  signIn_visible.value = false;
  signInForm.email = "";
  signInForm.password = "";
  signOutForm.email = "";
  signOutForm.password = "";
  signOutForm.confirm_password = "";
  signOutForm.type = "";

  search_visible.value = false;
  search_params.value = "";
};

// 鼠标移入事件
const menuDom = ref(null); // 真实dom
const menuList = ref(null); // 真实dom
const handleMouseenter = () => {
  if (menuList.value) {
    menuList.value.style.display = "grid";
  }
};
// 鼠标移出事件
const handleMouseleave = () => {
  if (menuList.value) {
    menuList.value.style.display = "none";
  }
};
</script>

<style lang="scss" scoped>
.com-header {
  width: 100%;
  height: 80px;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #1f2635;
  z-index: 1000;
  main {
    width: 1400px;
    height: 80px;
    display: flex;
    justify-content: space-between;
    .left-container {
      display: flex;
      align-items: center;
      .logo-box {
        padding: 6px 10px;
        margin-right: 60px;
        width: fit-content;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        img {
          width: 100%;
          height: 100%;
        }
        p {
          font-size: 22px;
          font-weight: 700;
          color: #fff;
          text-align: center;
          line-height: 50px;
          z-index: 200;
        }
      }
      .menu-box {
        height: 100%;
        display: flex;
        gap: 24px;
        li {
          padding: 0 20px;
          width: fit-content;
          position: relative;
          display: flex;
          align-items: center;
          font-size: 16px;
          font-family: "default";
          color: #b4b7b7;
          cursor: pointer;
          .menu-list {
            padding: 20px;
            display: none;
            width: 900px;
            height: fit-content;
            position: absolute;
            top: 80px;
            left: 0;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            background: #4a4a4c;
            background: #141922;
            .menu-item {
              padding: 8px;
              font-size: 15px;
              &:hover {
                color: #ffa330;
                background: #333;
              }
            }
          }
          &:hover {
            color: #ffa330;
            &::before {
              content: "";
              position: absolute;
              top: 0px; /* 边框宽度 */
              left: 50%;
              transform: translateX(-50%);
              width: 30px;
              height: 3px;
              background-color: #ffa330;
            }
          }
        }
        li:nth-child(1) {
          position: relative;
          &:hover {
            color: #b4b7b7;
            background: #4a4a4c;
            background: #141922;
            &::before {
              display: none;
            }
          }
        }
      }
    }
    .right-container {
      display: flex;
      align-items: center;
      .sign-in-box {
        margin-right: 30px;
        color: #787878;
        cursor: pointer;
        .el-icon {
          margin-right: 8px;
          font-size: 20px;
        }
        span {
          font-size: 16px;
          font-weight: 700;
        }
        &:hover {
          color: #ffa330;
        }
      }
      .account-box {
        margin-right: 30px;
        color: #787878;
        cursor: pointer;
        .el-icon {
          margin-right: 8px;
          font-size: 20px;
        }
        span {
          font-size: 16px;
          font-weight: 700;
        }
        &:hover {
          color: #ffa330;
        }
      }
      .query-box {
        width: 180px;
        height: 60%;
        display: flex;
        justify-content: center;
        align-items: center;
        // background: #b4b7b7;
        border-radius: 15px;
        border: 1px solid;
        font-size: 14px;
        color: #787878;
        .el-icon {
          padding-left: 10px;
          font-size: 24px;
          color: #000;
          cursor: pointer;
        }
      }
    }
  }
  ::v-deep .signIn-dialog {
    width: 800px;
    background: #182131;
    .el-dialog__header {
      display: none;
    }
    .content {
      padding: 20px 0;
      display: flex;
      justify-content: center;
      .left-container {
        width: 460px;
      }
      .el-divider {
        margin: 0 100px;
        border-image: linear-gradient(0deg, #5f5f5f00, #5f5f5f, #5f5f5f00) 1;
      }
      .right-container {
        width: 460px;
      }
      .el-form {
        .title {
          margin-bottom: 40px;
          font-size: 24px;
          font-weight: 700;
          color: #fff;
          font-family: "Georgia";
        }
        .text1 {
          font-size: 16px;
          text-align: center;
          color: #fff;
          cursor: pointer;
        }
        .text1:hover {
          text-decoration: underline;
        }
        .text2 {
          font-size: 16px;
          line-height: 16px;
          font-weight: 700;
          color: #b4b7b7;
          span {
            color: #ffa330;
            cursor: pointer;
          }
        }
        .el-form-item {
          .el-form-item__label {
            font-size: 16px;
            color: #b4b7b7;
            &::after {
              color: #b4b7b7;
            }
          }
          .el-form-item__content {
            .el-input {
              .el-input__wrapper {
                border: 1px solid #6c6868;
                box-shadow: none !important;
                background: #4a4a4ca6;
                .el-input__inner {
                  font-size: 16px;
                  font-weight: 700;
                  color: #fff;
                }
              }
            }
            .el-button {
              margin-top: 30px;
              width: 100%;
              font-weight: 700;
              color: #fff;
              border: none;
              background: #ffa330;
              &:hover {
                background: #eeb46c;
              }
            }
            .checkbox-box {
              display: flex;
              align-items: center;
            }
          }
        }
      }
    }
  }
  ::v-deep .search-dialog {
    background: rgba(0, 0, 0, 0.8);
    .el-dialog__header {
      display: none;
    }
    .el-dialog__body {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .content {
        width: 300px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .title {
          padding: 14px 10px;
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          span {
            font-size: 20px;
            font-weight: 700;
            color: #fff;
          }
          .el-icon {
            font-size: 24px;
            color: #fff;
            cursor: pointer;
          }
        }
        .el-input {
          margin-bottom: 4px;
          .el-input__wrapper {
            border: none !important;
            box-shadow: none !important;
            .el-input__inner {
              font-size: 16px;
            }
          }
        }
        .game-list {
          padding: 4px 10px;
          width: 100%;
          max-height: 200px;
          overflow: auto;
          background: #fff;
          li {
            margin-bottom: 4px;
            display: flex;
            img {
              margin-right: 10px;
              width: 30px;
              height: 30px;
              border: 1px solid #666;
            }
            .name {
              font-size: 14px;
              line-height: 30px;
              color: #000;
              cursor: pointer;
            }
            &:hover {
              background: #ffa330;
            }
          }
        }
      }
    }
  }
}
</style>
